<template>
  <a-modal v-model:visible="visible" wrap-class-name="addEmailModal" :footer="null" :width="modalWidth" destroy-on-close>
    <div class="addMail-title">添加邮箱账户{{ detailVisible ? ' - 手动设置' : '' }}</div>
    <template v-if="!detailVisible">
      <a-form
          :model="formData"
          name="basic"
          :wrapper-col="{ span: 24 }"
          autocomplete="off"
      >
        <a-form-item name="username">
          <email-input v-model="formData.email"/>
        </a-form-item>
        <a-form-item name="username">
          <a-input v-model:value="formData.username" placeholder="请输入授权码"/>
        </a-form-item>
      </a-form>
      <div style="padding-top: 32px;padding-bottom: 6px;">
        <a-button class="add-submit-button" size="large" type="primary" @click="submitForm">立即添加</a-button>
      </div>
      <div style="text-align: right;">
        <a @click="detailShow">手动设置</a>
      </div>
    </template>
    <template v-else>
      <a-form
          :model="formData"
          name="basic"
          :wrapper-col="{ span: 24 }"
          autocomplete="off"
      >
        <a-form-item name="username" label="接收类型">
          <a-select v-model:value="formData.select">
            <a-select-option value="">无</a-select-option>
            <a-select-option value="usa">SSL/TLS</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="username" label="邮箱账号">
          <a-input v-model:value="formData.username" placeholder="请输入授权码"/>
        </a-form-item>
        <a-form-item name="username" label="密码">
          <a-input v-model:value="formData.username" placeholder="请输入授权码"/>
        </a-form-item>
        <a-form-item name="username" label="POP服务器">
          <div class="detail-div">
            <a-input v-model:value="formData.username" placeholder="请输入授权码"/>
            <a-checkbox>SSL</a-checkbox>
            <span class="port-label">端口：</span>
            <a-input style="width: 120px;"></a-input>
          </div>
        </a-form-item>
        <a-form-item name="username" label="SMTP服务器">
          <div class="detail-div">
            <a-input v-model:value="formData.username" placeholder="请输入授权码"/>
            <a-checkbox>SSL</a-checkbox>
            <span class="port-label">端口：</span>
            <a-input style="width: 120px;"></a-input>
          </div>
        </a-form-item>
      </a-form>
      <div class="detail-btn-wrapper">
        <a-button @click="detailHide" style="margin-right: 20px;">返回</a-button>
        <a-button @click="xxx" type="primary">添加</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script setup>
import {reactive, ref, computed} from "vue";
import { BhMessage } from "../../util/index.js";
import EmailInput from '../../components/EmailInput.vue'

const visible = ref(false)
const formData = reactive({
  email: ''
})
const detailVisible = ref(false)
const modalWidth = computed(() => detailVisible.value ? '600px' : '328px')

function show() {
  visible.value = true
}

function hide() {
  visible.value = false
}

function detailShow() {
  detailVisible.value = true
}

function detailHide() {
  detailVisible.value = false
}

function xxx() {
  BhMessage({
    content: '是否将当前文件保存草稿箱？'
  })
}

function submitForm() {
  console.log(formData.email, 'xxx');
}

defineExpose({
  show,
  hide
})
</script>

<style lang="less">
.addEmailModal{
  .add-submit-button{
    width: 100%;
    height: 40px;
    font-size: 16px;
    background: linear-gradient(270deg, #009496 0%, #00A098 55%, #00B09D 86%, #00C29F 100%);
    border-radius: 4px;
  }
  .ant-modal-close-x{
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
  .addMail-title{
    padding-top: 6px;
    font-size: 20px;
    color: #333333;
    font-weight: 600;
    margin-bottom: 14px;
  }
  .ant-form-item{
    margin-bottom: 16px;
  }
  .ant-form-item-label.ant-col{
    width: 92px;
  }
  .detail-div{
    display: flex;
    align-items: center;
    .port-label{
      flex-shrink: 0;
    }
    .ant-checkbox-wrapper{
      margin: 0 12px;
    }
  }
  .detail-btn-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    .ant-btn{
      width: 80px;
    }
  }
}

</style>